﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HoverTest.aspx.cs" Inherits="HTML5Video.Video.HoverTest" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../Resource/jquery-1.8.0.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div id="d1" style="width: 100px; height: 100px; border: 1px solid red;"></div>
            <div id="d2" style="width: 273px; height: 230px; position: absolute; left: 131px; top: 17px;border:1px solid red;display:none"></div>
        </div>
    </form>
</body>
</html>
<script type="text/javascript">
    var ElMove = function (fromEl,toEl) {
        this.fromel = fromEl;
        this.toel = toEl;
        this.existfel = false;
        this.existtel = false;

        this.movein = function (el, tag) {
            if (tag =="parent") {
                $(el).css("display", "block");
            }
            if (tag =="child") {
                $(el).css("display", "block");
            }
        }

        this.moveout = function (el, tag) {
            if (tag == "parent") {
                if (this.existtel == true) {
                    $(el).css("display", "block");
                } else {
                    $(el).css("display", "none");
                }
            }
            if (tag=="chlid") {
                if (this.existfel == true) {
                    $(el).css("display", "block");
                } else {
                    $(el).css("display", "none");
                }
            }
        }

        this.BindEvent = function () {
            var that = this;
            $(that.fromel).hover(function () {
                that.movein(that.toel, "parent");
            }, function (e) {
                window.setTimeout(function () {
                    //alert("P-->out");
                    that.existtel = that.checkPosition(that.toel, e.pageX, e.pageY);
                    that.existtel = true;
                    that.moveout(that.toel, "parent");
                }, 2000);
            });

            $(that.toel).hover(function () {
                that.movein(that.toel, "child");
            }, function (e) {
                window.setTimeout(function () {
                    alert("C-->out");
                    that.existfel = that.checkPosition(that.fromel, e.pageX, e.pageY);
                    //that.existfel = true;
                    that.moveout(that.toel, "child");
                }, 2000);
            });
        }

        this.checkPosition = function (el,x,y) {
            var _t = el.offsetTop;
            var _l = el.offsetLeft;
            var _w = el.offsetLeft + el.offsetWidth;
            var _h = el.offsetTop + el.offsetHeight;
            if (x > _l && x < _l + _w && y > _t && y < _t + _h) {
                return true;
            }
            return false;
        }

        this.init = function () {
            this.BindEvent();
        }
    }

    var c = new ElMove(document.getElementById("d1"), document.getElementById("d2"));
    c.init();
</script>
